<template>
    <div class="container">
        <div class="upperPart">
            <!-- 左侧区域 -->
            <div class="left">
                <text-dropdown :options="dropdownOptions" class="textOne" @changeSelect="areaOnChange"/>
                <div class="top-div">
                    <!-- 上方区域 -->
                    <div class="total-div">
                        <p>所有设备</p>
                        <h2>{{ all_device }}</h2>
                    </div>
                    <div class="top" id="main" v-if="isDestroyed">
                        <!-- //这里导入了曲线图-->
                    </div>
                </div>
                <!-- 下方区域 -->
                <div class="bottom-row">
                    <div class="bottomleft">
                        <div class="incident">
                            <h2>上报事件</h2>
                            <router-link to="/record/record">
                                <p>{{ TotalNumberEvents }}</p>
                            </router-link>
                            <h1>件</h1>
                            <img src="./image/event.png">
                        </div>
                    </div>
                    <div class="bottomright">
                        <div class="incident">
                            <h2>代办事件</h2>
                            <router-link to="/record/record">
                                <p>{{ agencyNumber }}</p>
                            </router-link>
                            <h1>件</h1>
                            <img src="./image/reportanevent.png">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧区域 -->
            <div class="right">
                <div class="top-row">
                    <!-- 上方第一个区域 -->
                    <div class="topfirst">
                        <div class="site-info">
                            <h2>站点数</h2>
                            <router-link to="/site/site">
                                <p>{{ numberSites }}</p>
                            </router-link>
                            <h1>个</h1>
                            <img src="./image/site.png">
                        </div>
                    </div>
                    <!-- 上方第二个区域 -->
                    <div class="topsecond">
                        <div class="site-info">
                            <h2>设备数</h2>
                            <router-link to="/device/list">
                                <p>{{ numberTotalDeviceCount }}</p>
                            </router-link>
                            <h1>个</h1>
                            <img src="./image/total.png">
                        </div>
                    </div>
                    <!-- 上方第三个区域 -->
                    <div class="topthird">
                        <div class="site-info">
                            <h2>在线设备</h2>
                            <a>
                                <p @click="goToDeviceListWithStatus(1)">{{ numberOnline }}</p>
                            </a>
                            <h1>个</h1>
                            <img src="./image/online.png">
                        </div>
                    </div>
                    <!-- 上方第四个区域 -->
                    <div class="topfourth">
                        <div class="site-info">
                            <h2>异常设备</h2>
                            <a>
                                <p @click="goToDeviceListWithStatus(0)">{{ numberOffline }}</p>
                            </a>
                            <h1>个</h1>
                            <img src="./image/offline.png">
                        </div>
                    </div>
                </div>
                <!-- 下方区域 -->
                <div class="bottom">
                    <div class="flow">
                        <img src="./image/settings.png" class="flow-img">
                        <h2>设备工艺流程图</h2>
                    </div>
                    <img src="./image/flowchart.png" class="flow-img1">
                </div>
            </div>
        </div>
        <!-- 底部区域 -->
        <div class="bottom-container">
            <!-- 底部左侧区域 -->
            <div class="containerleft">
                <div class="title">
                    <img src="./image/Logs.png">
                    <h2>事件日志</h2>
                    <router-link to="/record/record" class="Jump">更多</router-link>
                </div>
                <ul class="header">
                    <li>事件名称</li>
                    <li>时间</li>
                    <li>站点名称</li>
                    <li>事件详情</li>
                </ul>
                <div class="event-div">
                    <ul v-for="event in EventList" :key="event.id" class="event">
                        <li v-if="event.eventName == 0">运维上报</li>
                        <li v-else>事件上报</li>
                        <li>{{ event.reportingTime }}</li>
                        <li>{{ event.siteName }}</li>
                        <li>{{ event.detail }}</li>
                    </ul>
                </div>
            </div>
            <!-- 底部右侧区域 -->
            <div class="containeright">
                <div class="titleOne">
                    <img src="./image/columnar.png">
                    <h2>站点液位</h2>
                    <!--          <p @click="showAllRankings = true">更多</p>-->
                    <Modal v-if="showAllRankings" :data="LevelRankingList" @close="showAllRankings = false"/>
                </div>
                <ul class="headerOne">
                    <li>站点排行</li>
                    <li>站点名称</li>
                    <li>瞬时液位</li>
                </ul>
                <div class="eventOne-div">
                    <ul v-for="(item, index) in LevelRankingList" :key="item.id" class="eventOne">
                        <li>
                            <!-- <span :class="{'top-one': index === 0, 'top-two': index === 1, 'top-three': index === 2}">
                              {{ index === 0 ? 'TOP.1' : (index === 1 ? 'TOP.2' : (index === 2 ? 'TOP.3' : (index + 1))) }}
                            </span> -->
                            <span>
	  {{ index + 1 }}
	</span>
                        </li>
                        <li style="width: 120px;">{{ item.siteName }}</li>
                        <li>{{ item.maxLiquidLevel }}mm</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import {selectelevelRanking, selecteQueryLog, selectequipment, selectequipmentLevel} from "../../api/home/select";
import Modal from './Modal.vue'; // 假设你已经创建了弹框组件并引入了它
import TextDropdown from './TextDropdown.vue';

export default {
    name: "index",
    components: {
        Modal,
        TextDropdown
    },

    //常量
    data() {
        return {
            numberSites: '', //站点数
            numberOnline: '', //在线设备数
            numberOffline: '',//离线设备数
            numberTotalDeviceCount: '',//总数
            TotalNumberEvents: '', //总事件数
            agencyNumber: '',//代办事件数
            EventList: [], //事件列表
            LevelRankingList: [],//排名列表
            showAllRankings: false, //点击更多
            dropdownOptions: ['秀洲区', '南湖区', '经开区', '嘉善县', '桐乡市', '海盐县', '海宁市', '平湖市'], // 下拉选项数据
            myChart: null,
            isDestroyed: true,
            xzq_on: 0,
            nhq_on: 0,
            hnx_on: 0,
            jsx_on: 0,
            txx_on: 0,
            phx_on: 0,
            hyx_on: 0,
            xzq_off: 0,
            nhq_off: 0,
            hnx_off: 0,
            jsx_off: 0,
            txx_off: 0,
            phx_off: 0,
            hyx_off: 0,
            all_device: 0
        }
    },
    //方法区
    methods: {

        //离线设备数量
        goToDeviceListWithStatus(dto) {
            this.$router.push({path: '/device/list', query: {deviceStatus: dto}});
        },
        //点击更多跳转运维管理页面
        JumpEvent() {
            this.$router.push('/record/record');
        },
        //查询日志
        QueryLog() {
            selecteQueryLog().then(re => {
                //复制给上面定义的事件list
                this.EventList = re
            }).catch(error => {
                console.log(error)
            })
        },
        //查询液位排行
        LevelRanking() {
            selectelevelRanking().then(re => {
                //赋值给上面的排行列表
                this.LevelRankingList = re
            }).catch(error => {
                console.log(error);
            })
        },
        //加载曲线图
        initChart() {
            //初始化 页面一加载就调用
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            this.myChart = myChart;
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                grid: {
                    top: "40%"
                },
                legend: {
                    top: '5%',
                    left: 'center',
                    show: false
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            emphasis: {
                                show: true,
                                textStyle: {
                                    color: function (param) {
                                        return param.name === '在线设备' ? 'yellow' : 'blue';  // 根据名称设置不同的颜色
                                    },
                                    fontSize: 20  // 设置文字大小为20px
                                }
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            {value: 0, name: ''},
                            {value: 0, name: ''}
                        ]
                    }
                ]
            };
            option && myChart.setOption(option);
            this.getoptinon();
        },
        //刷新页面
        // relo() {
        //   if (window.location.href.indexOf("#reloaded") == -1) {
        //     window.location.href = window.location.href + "#reloaded";
        //     window.location.reload();
        //   }
        // }
        getoptinon() {
            //加载设备数量等方法
            selectequipmentLevel().then(response => {
                this.xzq_on = response.level_device_online.xzq;
                this.nhq_on = response.level_device_online.nhq;
                this.hnx_on = response.level_device_online.hnx;
                this.jsx_on = response.level_device_online.jsx;
                this.txx_on = response.level_device_online.txx;
                this.phx_on = response.level_device_online.phx;
                this.hyx_on = response.level_device_online.hyx;
                this.xzq_off = response.level_device_offline.xzq;
                this.nhq_off = response.level_device_offline.nhq;
                this.hnx_off = response.level_device_offline.hnx;
                this.jsx_off = response.level_device_offline.jsx;
                this.txx_off = response.level_device_offline.txx;
                this.phx_off = response.level_device_offline.phx;
                this.hyx_off = response.level_device_offline.hyx;
                this.numberSites = response.numberSites;//设置站点数
                this.numberOnline = response.numberOnline; //在线数量
                this.numberOffline = response.numberOffline; //离线数量
                this.numberTotalDeviceCount = response.numberTotalDeviceCount;//设备总数
                this.TotalNumberEvents = response.TotalNumberEvents; //总事件数
                this.agencyNumber = response.agencyNumber;//代办事件数

                this.setChart(this.xzq_on, this.xzq_off);

            }).catch(error => {
                console.log(error)
            })
        },

        setChart(online, offline) {
            this.all_device = offline + online;
            var option = {
                series: [
                    {data: []}
                ]
            };
            option.series[0].data = [
                {value: offline, name: '异常设备'},
                {value: online, name: '在线设备'}
            ];
            this.myChart.setOption(option);
        },

        // 选择区域
        areaOnChange(value) {
            if (value === "秀洲区") {
                this.setChart(this.xzq_on, this.xzq_off);
            } else if (value === "南湖区") {
                this.setChart(this.nhq_on, this.nhq_off);
            } else if (value === "海宁市") {
                this.setChart(this.hnx_on, this.hnx_off);
            } else if (value === "嘉善县") {
                this.setChart(this.jsx_on, this.jsx_off);
            } else if (value === "桐乡市") {
                this.setChart(this.txx_on, this.txx_off);
            } else if (value === "平湖市") {
                this.setChart(this.phx_on, this.phx_off);
            } else if (value === "海盐县") {
                this.setChart(this.hyx_on, this.hyx_off);
            } else if (value === "经开区") {
                this.setChart(0, 0);
            }
        },
    },

    activated() {
        //加载曲线图
        // this.initChart();
    },
    mounted: function () {
        // this.relo();
        //加载曲线图
        this.initChart();

        // this.initChart();
        //查询排行
        this.LevelRanking();
        //查询日志
        this.QueryLog();
    },
    beforeUnmount() {
        this.isDestroyed = false;
    },

}
</script>

<style scoped>
.container {
    width: 100%;
    height: 85vh;
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: space-between;
    align-items: stretch;
    background-color: #f6f7f8;
}

.upperPart {
    width: 100%;
    flex-basis: 50%; /* 占比为50% */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.header {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    font-weight: bold;
    padding-left: 132px;
    padding-right: 148px;
}

.event-div {
    overflow: scroll;
    max-height: 250px;
}

.event-div::-webkit-scrollbar {
    display: none;
}

.event {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 10px;
}

.event li {
    flex: 1;
    padding-right: 15px;
    text-align: center;
}

.event-div ul {
    padding-left: 78px;
    padding-right: 90px;
}

.headerOne {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: bold;
    margin-left: -20px;
    font-size: 17px;
    padding-left: 80px;
    padding-right: 60px;
}

.eventOne-div {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 230px;
}

.eventOne-div ul {
    padding-left: 48px;
    padding-right: 64px;
    text-align: center;
}

/* .eventOne-div::-webkit-scrollbar {
  overflow-x:hidden;
} */

.eventOne {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 10px;
}

.eventOne li {
    width: 95px;
}

.right {
    flex-basis: 70%;
}

.left {
    position: relative;
    flex-basis: 30%;
    height: 50vh;
    padding: 1px;
}

.right {
    height: 50vh;
    padding: 10px;
    margin-left: 20px;
    margin-top: -35px;
}

.top-div {
    position: relative;
    width: 450px;
    height: 310px;
    background-color: #fff;
    margin-bottom: 55px;
}

.total-div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

.total-div h2 {
    font-size: 25px;
    color: #2b85e4;
    font-weight: bold;
}

.top {
    position: absolute;
    left: 0px;
    height: 310px;
    width: 450px;
    top: 0px;
}

.bottom {
    margin-top: -20px;
    height: 330px;
    margin-bottom: 10px;
    background-color: #fff;
}

.bottom img {
    margin-top: 5px;
    margin-left: 40px;
}

.bottom-row {
    margin-top: -27px;
    display: flex;
    justify-content: space-between;
}

.bottomleft,
.bottomright {
    width: 46.5%;
    height: 100px;
}

.bottom-container {
    margin-top: 35px;
    display: flex;
}

.containerleft {
    position: relative;
    flex-basis: 59%;
    overflow: scroll;
    max-height: 380px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: #fff;
}

.containerleft::-webkit-scrollbar {
    display: none;
}

.containeright {
    flex-basis: 39%;
    padding: 10px;
    margin-left: 25px;
    background-color: #fff;
}

.containeright::-webkit-scrollbar {
    display: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 130px;
    padding-right: 130px;
}

li {
    margin-bottom: 10px;
}

.top-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.site-info {
    position: relative;
    text-align: center;
    width: 240px;
}

.site-info h2 {
    position: absolute;
    top: 20px;
    left: 65%;
    transform: translateX(-50%);
    font-size: 18px;
}

.site-info p {
    position: absolute;
    top: 55px;
    margin-left: 125px;
    font-size: 30px;
    color: #1679f1;
    font-weight: bold;
}

.site-info h1 {
    position: absolute;
    top: 70px;
    margin-left: 180px;
    color: #1679f1;
}

.topfirst {
    position: relative;
    margin-top: 10px;
    flex-basis: 20%;
    height: 150px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topsecond {
    position: relative;
    margin-top: 10px;
    flex-basis: 20%;
    height: 150px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topthird {
    position: relative;
    margin-top: 10px;
    flex-basis: 20%;
    height: 150px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topfourth {
    position: relative;
    margin-top: 10px;
    flex-basis: 20%;
    height: 150px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.title img {
    margin-right: 5px;
    margin-left: 80px;
}

.title h2 {
    font-size: 20px;
    font-weight: bold;
}

.Jump {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    left: 780px;
}

.titleOne {
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.titleOne img {
    margin-right: 5px;
    margin-left: 40px;
}

.titleOne h2 {
    font-size: 20px;
    font-weight: bold;
}

.titleOne p {
    font-size: 18px;
    font-weight: bold;
    margin-left: 300px;
}

.flow {
    position: relative;
    margin-top: 20px;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.flow h2 {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    left: 80px;
    top: 20px;
}

.flow-img {
    position: relative;
    top: 15px;
}

.flow-img1 {
    position: relative;
    left: 50px;
}

.top-one {
    color: red;
}

.top-two {
    color: darkgoldenrod;
}

.top-three {
    color: #d9d967;
}

.incident {
    position: relative;
}

.incident h2 {
    position: absolute;
    top: 10px;
    left: 0;
    margin: 0;
    padding: 10px;
    font-size: 20px;
}

.incident p {
    position: absolute;
    margin-top: 60px;
    margin-left: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #2b85e4;
}

.incident h1 {
    position: absolute;
    margin-top: 70px;
    margin-left: 60px;
    font-size: 18px;
    color: #2b85e4;
}

.textOne {
    position: absolute;
    z-index: 3;
    top: 20px;
    left: 30px;
}

a {
    cursor: pointer;
}
</style>
